/*!
 *
 * Copyright 2015 
 * 
 * rewrited by Zhangdi(zhangdiwaa@163.com) and Hanyuping(yuping0713@126.com)
 */
var datajson = [
    {"id": 1, "state": "full", "row": 1, "col": 1, sample: {"id": 1001, "name": "袁老头血清", description: "2015.3.8采集"}},
    {"id": 2, "state": "full", "row": 1, "col": 2, sample: {"id": 1002, "name": "房仕龙血清", description: "2015.3.8采集"}},
    {"id": 3, "state": "full", "row": 1, "col": 3, sample: {"id": 1003, "name": "刘志强血清", description: "2015.3.8采集"}},
    {"id": 4, "state": "full", "row": 1, "col": 4, sample: {"id": 1004, "name": "王永昌血清", description: "2015.3.8采集"}},
    {"id": 5, "state": "full", "row": 2, "col": 1, sample: {"id": 1005, "name": "林卫国血清", description: "2015.3.8采集"}},
    {"id": 6, "state": "full", "row": 2, "col": 2, sample: {"id": 1006, "name": "朱古力血清", description: "2015.3.8采集"}},
    {"id": 7, "state": "empty", "row": 2, "col": 3, sample: {}},
    {"id": 8, "state": "empty", "row": 2, "col": 4, sample: {}},
    {"id": 9, "state": "empty", "row": 3, "col": 1, sample: {}},
    {"id": 10, "state": "empty", "row": 3, "col": 2, sample: {}},
    {"id": 11, "state": "empty", "row": 3, "col": 3, sample: {}},
    {"id": 12, "state": "full", "row": 3, "col": 4, sample: {"id": 1007, "name": "朱古力血清", description: "2015.3.8采集"}}
]

var serialization = Gridster.sort_by_row_and_col_asc(datajson);

$(function () {
    var gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [100, 100],
        widget_margins:         [5, 5],
        resize:                 {
            enabled: false
        },
        helper:                 'clone'
    }).data('gridster').disable();

    $.each(serialization, function () {
        if (this.state == "full") {
            var html = '<li class="full" grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        } else {
            var html = '<li grid-id="' + this.id + '"><span>' + this.id + '</span></li>';
        }
        gridster.add_widget(html, 1, 1, this.col, this.row);
    });

    gridster.$el
            .on('click', '> li', function (event) {
                $.each($(".gs-w"), function () {
                    $("#sample-form").remove();
                    $(this).removeClass("active");
                    gridster.resize_widget($(this), 1, 1);
                });

                var $this_grid = $(this);
                var this_grid_id = $(this).attr("grid-id");

                if (!$this_grid.hasClass("active")) {
                    $this_grid.addClass("active");
                    gridster.resize_widget($this_grid, 3, 3);
                    if ($this_grid.hasClass("full")) {
                        //已满的样本，点击可以查看样本信息，或者进行样本出库操作
                        var form =
                                '<div id="sample-form" class="widget-content-white padded glossed">' +
                                '<div class="row">' +
                                   '<h3>空间已用</h3>' +
                                '<div class="form-group col-md-12">' +
                                '<input type="text" class="form-control" placeholder="编号: '+ datajson[this_grid_id-1].sample.id +'">' +
                                '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="form-group col-md-12">' +
                                '<input type="text" class="form-control" placeholder="名称: '+ datajson[this_grid_id-1].sample.name +'">' +
                                '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="form-group col-md-12">' +
                                '<input type="text" class="form-control" placeholder="说明: '+ datajson[this_grid_id-1].sample.description +'">' +
                                '</div>' +
                                '</div>' +
                                '<button class="btn btn-primary">出库</button>&nbsp;&nbsp;' +
                                '<button class="btn btn-default" id="sample-form-back">返回</button>' +
                                '</div>';
                        $this_grid.append(form);
                    } else {
                        //未满的样本，可以进行样本入库操作
                        //已满的样本，点击可以查看样本信息，或者进行样本出库操作
                        var form =
                                '<div id="sample-form" class="widget-content-white padded glossed">' +
                                '<div class="row">' +
                                        '<h3>空间未用</h3>' +
                                '<div class="form-group col-md-12">' +
                                '<input type="text" class="form-control" id="sample-form-id" placeholder="编号:">' +
                                '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="form-group col-md-12">' +
                                '<input type="text" class="form-control" id="sample-form-name" placeholder="名称:">' +
                                '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="form-group col-md-12">' +
                                '<input type="text" class="form-control" id="sample-form-desc" placeholder="说明:">' +
                                '</div>' +
                                '</div>' +
                                '<div class="row">' +
                                '<div class="form-group col-md-12">' +
                                '<span id="sample-form-tip">&nbsp;</span>' +
                                '</div>' +
                                '</div>' +
                                '<button class="btn btn-primary" id="sample-form-save">保存</button>&nbsp;&nbsp;' +
                                '<button class="btn btn-default" id="sample-form-back">返回</button>' +
                                '</div>';
                        $this_grid.append(form);
                    }
                }

                $("#sample-form").click(function(event){
                    event.stopPropagation();    //  阻止事件冒泡
                })

                $("#sample-form-back").click(function () {
                    $("#sample-form").remove();
                    $(this).removeClass("active");
                    gridster.resize_widget($this_grid, 1, 1);
                });

                $("#sample-form-save").click(function(){
                    if($("#sample-form-id").val() == ""){
                        console.log("shit");
                        $("#sample-form-tip").replaceWith('<span id="sample-form-tip">请填写ID</span>');
                    }else if($("#sample-form-name").val() == ""){
                        $("#sample-form-tip").replaceWith('<span id="sample-form-tip">请填写名称</span>');
                    }else if($("#sample-form-desc").val() == ""){
                        $("#sample-form-tip").replaceWith('<span id="sample-form-tip">请填写描述</span>');
                    }else{
                        datajson[this_grid_id-1].sample = {
                            "id": $("#sample-form-id").val(),
                            "name": $("#sample-form-name").val(),
                            description: $("#sample-form-desc").val()
                        };
                        datajson[this_grid_id-1].state = "full";
                        $this_grid.addClass("full");

                        $("#sample-form").remove();
                        $(this).removeClass("active");
                        gridster.resize_widget($this_grid, 1, 1);
                    }
                })
            });

});